<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css"/>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:50vh;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // app.title = '2015 年上证指数';

    var rawData = [
        ['2016-01-01','6.4935998916626','6.4935998916626','6.4935998916626','6.4935998916626'],
        ['2016-01-04','6.5353999137878','6.5083999633789','6.5083999633789','6.536600112915'],
        ['2016-01-05','6.5148000717163','6.5209999084473','6.5142998695373','6.5247001647949'],
        ['2016-01-06','6.5566000938416','6.5271000862122','6.5271000862122','6.5615000724792'],
        ['2016-01-07','6.5928997993469','6.5823001861572','6.5795998573303','6.5947999954224'],
        ['2016-01-08','6.5964999198914','6.5686001777649','6.5672001838684','6.5967001914978'],
        ['2016-01-11','6.5694999694824','6.5952000617981','6.5694999694824','6.5952000617981'],
        ['2016-01-12','6.5725002288818','6.5682001113892','6.5682001113892','6.580500125885'],
        ['2016-01-13','6.5753998756409','6.5700998306274','6.5700998306274','6.5805997848511'],
        ['2016-01-14','6.590099811554','6.5776000022888','6.5776000022888','6.5921001434326'],
        ['2016-01-15','6.5848999023438','6.5857000350952','6.583399772644','6.588399887085'],
        ['2016-01-18','6.5788998603821','6.5840001106262','6.5753998756409','6.5840001106262'],
        ['2016-01-19','6.5784997940064','6.5753002166748','6.5753002166748','6.5795998573303'],
        ['2016-01-20','6.5784001350403','6.5769000053406','6.5769000053406','6.5802998542786'],
        ['2016-01-21','6.5799999237061','6.5787000656128','6.5756001472473','6.580500125885'],
        ['2016-01-22','6.5791001319885','6.5784001350403','6.5771999359131','6.5799999237061'],
        ['2016-01-25','6.5792999267578','6.5784001350403','6.5774002075195','6.5799999237061'],
        ['2016-01-26','6.5824999809265','6.579400062561','6.5787000656128','6.5851001739502'],
        ['2016-01-27','6.5777997970581','6.5803999900818','6.5755000114441','6.5817999839783'],
        ['2016-01-28','6.5750999450684','6.577700138092','6.5735998153686','6.5788998603821'],
        ['2016-01-29','6.5760998725891','6.5745000839233','6.5732002258301','6.5795998573303'],
        ['2016-02-01','6.5784001350403','6.5743999481201','6.5743999481201','6.5819001197815'],
        ['2016-02-02','6.5798001289368','6.5782999992371','6.5771999359131','6.5799999237061'],
        ['2016-02-03','6.5770001411438','6.5792999267578','6.5752000808716','6.580500125885'],
        ['2016-02-04','6.564799785614','6.5764999389648','6.5643000602722','6.5791001319885'],
        ['2016-02-05','6.5739002227783','6.5683999061584','6.5679001808167','6.5753998756409'],
        ['2016-02-08','6.5739002227783','6.5739002227783','6.5739002227783','6.5739002227783'],
        ['2016-02-09','6.5739002227783','6.5739002227783','6.5739002227783','6.5739002227783'],
        ['2016-02-10','6.5739002227783','6.5739002227783','6.5739002227783','6.5739002227783'],
        ['2016-02-11','6.5739002227783','6.5739002227783','6.5739002227783','6.5739002227783'],
        ['2016-02-12','6.5739002227783','6.5739002227783','6.5739002227783','6.5739002227783'],
        ['2016-02-15','6.4962000846863','6.5303997993469','6.4889001846314','6.5309000015259']
        ].reverse();

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data[i - j][1];
            }
            result.push(sum / dayCount);
        }
        return result;
    }


    var dates = rawData.map(function (item) {
        return item[0];
    });

    var data = rawData.map(function (item) {
        return [+item[1], +item[2], +item[5], +item[6]];
    });
    var option = {
        backgroundColor: '#21202D',
        legend: {
            data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
            inactiveColor: '#777',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false,
                type: 'cross',
                lineStyle: {
                    color: '#376df4',
                    width: 2,
                    opacity: 1
                }
            }
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLine: {lineStyle: {color: '#8392A5'}}
        },
        yAxis: {
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
        },
        grid: {
            bottom: 80
        },
        dataZoom: [{
            textStyle: {
                color: '#8392A5'
            },
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '40%',
            dataBackground: {
                areaStyle: {
                    color: '#8392A5'
                },
                lineStyle: {
                    opacity: 0.8,
                    color: '#8392A5'
                }
            },
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }, {
            type: 'inside'
        }],
        animation: false,
        series: [
            {
                type: 'candlestick',
                name: '日K',
                data: data,
                itemStyle: {
                    normal: {
                        color: '#FD1050',
                        color0: '#0CF49B',
                        borderColor: '#FD1050',
                        borderColor0: '#0CF49B'
                    }
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
</script>

</body>
</html>